<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-05-26 17:33:47
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-08-10 18:12:41
 * @FilePath: \code\ctp-static-portal-front\src\components\common\icon.vue
 * @Description: 图标
-->
<template>
  <img
    v-if="src"
    :src="src"
    :style="`width:${size}px;height:${size}px;margin-top:${-size / 2}px;margin-left:${
      -size / 2
    }px;`"
  />
  <span v-else class="vportal" :class="iconName" :style="`font-size:${size}px;`"> </span>
</template>
<script>
  export default {
    name: 'Icon',
    props: {
      icon: {
        type: String,
        default: '',
      },
      size: {
        type: Number,
        default: 14,
      },
    },
    data() {
      return {
        //图标class
        iconName: '',
        //图片url
        src: '',
      };
    },
    created() {
      const [type, src] = this.icon.split('|');
      switch (type) {
        case '0':
          //图片
          this.src = src;
          break;
        case '1':
          //图标
          this.iconName = src;
          break;
        default:
          //图标
          this.iconName = this.icon;
      }
    },
  };
</script>
<style lang="scss" scoped>
  img {
    position: absolute;
    top: 50%;
    left: 50%;
  }
</style>
